﻿var photoDetail = {
    obj: {},
    divElement: '#newscontent', //box chi tiet
    imgSr: 'http://sohanews.vcmedia.vn/', //domain anh,
    imgSr2: 'http://sohanews2.vcmedia.vn/', //domain anh
    imgSr1: 'http://channel.vcmedia.vn/', //domain ảnh cho bài PR
    app_key: 'b88af5f35d5e00c948ae2bda2d867590', //mingConsumerKey
    title: '',
    sapo: '',
    width: 0,
    height: 0,
    photoWidth: 0,
    init: function () {
        var me = this;
        var result = '';

        me.title = $('.detail').find('h1:first').text(); // title bai viet
        me.sapo = $('#newscontent').find('.description:first').text(); // sapo bai viet

        var $imgClick = $(me.divElement).find('img[src*="' + me.imgSr + '"], img[src*="' + me.imgSr2 + '"]');

        me.obj.img = [];
        $imgClick.each(function () {
            if (!$(this).parent().is('a')) {
                result += String.format('<li><a href="javascript:void(0)"><img src="{0}" alt="" /></a></li>', $(this).attr('src'));

                var caption = $(this).closest(".VCSortableInPreviewMode").find(".PhotoCMS_Caption").length > 0 ?
                    $(this).closest(".VCSortableInPreviewMode").find(".PhotoCMS_Caption").text() : me.title;

                me.obj.img.push({ src: $(this).attr('src'), caption: caption });
            }
        });

        $imgClick.hover(function () {
            if (!$(this).parent().is('a')) {
                $(this).css('cursor', '-webkit-zoom-in');
                $(this).css('cursor', '-moz-zoom-in');
            }
        }, function () {
            if (!$(this).parent().is('a')) {
                $(this).css('cursor', 'none');
            }
        });

        $imgClick.on('click', function () {
            if (!$(this).parent().is('a')) {
                me.openPopup();
                me.bindData($(this).attr('src'));
            }
        });

        if (me.obj.img.length > 5) {
            $('.popup-slide ul').html(result);
            $('.popup-slide').show();
        }

        if (window.location.hash != '') {
            if (window.location.hash.split('#')[1].indexOf('lb') != -1) {
                lb = window.location.hash.split('#')[1].replace('lb', '');
                if ($(me.divElement).find('img[lb="' + lb + '"]') != null) {
                    me.openPopup();
                    me.bindData($(me.divElement).find('img[lb="' + lb + '"]').attr('src'));
                }
            }
        }

        $('.popup-detail-content > img').hover(function () {
            $(this).css('cursor', 'pointer');
        });

        $('.popup-slide ul li').hover(function () {
            $(this).css('opacity', '1')
        }, function () {
            $(this).css('opacity', '0.3')
        });

        $('#popup-detail-left').hover(function () {
            if (me.isZoom()) {
                if (me.width >= me.photoWidth)
                    $('.popup-detail-content .zoom').hide();
                else
                    $('.popup-detail-content .zoom').fadeIn();
            }
            else {
                if ($('.popup-detail-content > img').attr('width') == me.width && $('.popup-detail-content > img').attr('height') == me.height)
                    $('.popup-detail-content .zoom').hide();
                else
                    $('.popup-detail-content .zoom').fadeIn();
            }

            if (me.getIndex($('.popup-slide li.active img').attr('src')) == 0) {
                if (me.obj.img.length == 1)
                    return;

                $('.popup-detail-content .next').show();
            }
            else if (me.getIndex($('.popup-slide li.active img').attr('src')) == me.obj.img.length - 1) {
                $('.popup-detail-content .prev').show();
            }
            else
                $('.popup-detail-content .prev, .popup-detail-content .next').fadeIn();

        }, function () {
            $('#popup-detail-left .zoom').hide();
            $('.popup-detail-content .prev, .popup-detail-content .next').hide();
        });
    },
    bindData: function (aSrc) {
        var me = this;

        me.reset();
        $(window).resize(function () {
            me.resize(me.width, me.height);
        });

        $('.popup-detail-content .prev, .popup-detail-content .next').hide();
        $('#popup-detail-bg').scrollTop(0);
        $('.popup-detail-content li').removeClass('active');

        if (me.getIndex(aSrc) == 0) {
            $('.popup-detail-content .next').show();
        }
        else if (me.getIndex(aSrc) == me.obj.img.length - 1) {
            $('.popup-detail-content .prev').show();
        }
        else
            $('.popup-detail-content .prev, .popup-detail-content .next').fadeIn();

        next = '';
        prev = '';
        var width = 0;
        var height = 0;
        var lb = '';
        var caption = '';

        for (i = 0; i < me.obj.img.length; i++) {
            if (me.obj.img[i].src == aSrc) {
                caption = me.obj.img[i].caption;

                if (i < me.obj.img.length - 1)
                    next = me.obj.img[i + 1].src;
                if (i > 0)
                    prev = me.obj.img[i - 1].src;

                break;
            }
        }

        $('.popup-detail-right-top h2').text(caption);

        if ($(me.divElement).find('img[src="' + aSrc + '"]').attr('w') != null)
            width = $(me.divElement).find('img[src="' + aSrc + '"]').attr('w');
        else
            width = $(me.divElement).find('img[src="' + aSrc + '"]').width();

        if ($(me.divElement).find('img[src="' + aSrc + '"]').attr('h') != null)
            height = $(me.divElement).find('img[src="' + aSrc + '"]').attr('h');
        else
            height = $(me.divElement).find('img[src="' + aSrc + '"]').height();

        if ($(me.divElement).find('img[src="' + aSrc + '"]').attr('lb') != null)
            lb = encodeURIComponent('#lb' + $(me.divElement).find('img[src="' + aSrc + '"]').attr('lb'));

        me.width = width;
        me.height = height;

        //$('.popup-detail-content > img').hide().attr('src', aSrc.replace(/\/thumb_w\/([0-9]+)\//, '/')).delay(500).fadeIn();
        $('.popup-detail-content > img').hide().attr('src', aSrc.replace(/thumb_w\/([0-9]+)\//, '')).delay(800).fadeIn();

        me.resize(width, height);
        me.album_load(aSrc);
        me.callBack(next, prev);

        //        if (me.title != null)
        //            $('.popup-detail-right-top h2').text(me.title);
        //        if (me.sapo != null)
        //            $('.popup-detail-right-top p').text(me.sapo);

        var MingWidth = '100%';
        var MingAppKey = me.app_key;
        var MingTitle = $.base64Encode(encodeURI(me.title));

        var MingUrl = '';
        if ($(me.divElement).find('img[src="' + aSrc + '"]').attr('lb') != null)
            MingUrl = window.location.protocol + '//' + window.location.host + window.location.pathname + lb;
        else
            MingUrl = aSrc;

        var MingNumCount = 5;
        var MingDebug = 1;
        var MingMin = 0; //1: hien thi box comment, 0: hien thi list comment
        var MingScroll = 1;
        var MingBox = 'mingid_comments_content_popup';
        var MingiframeId = 'mingId_frame_lightbox';

        $('#mingid_comments_content_popup').empty();
        mingid_comment_iframe_height = me.adBoxHeight();
        MINGID_IFRAME_FUNC.mingidGenIfram(MingWidth, mingid_comment_iframe_height, MingAppKey, MingUrl, MingTitle, MingNumCount, MingDebug, MingMin, MingScroll, MingUrl, MingBox, MingiframeId);
    },
    openPopup: function () {
        $('#popup-detail-bg').fadeIn('slow');
        $('body').addClass('no-scroll');
        $('#scroll_top').hide();

        $(document).keyup(this.keyUp);
    },
    closePopup: function () {
        $('#popup-detail-bg').fadeOut('slow');
        $('body').removeClass('no-scroll');

        $(document).off('keyup');
    },
    resize: function (width, height) {
        var minImageWidth = 320;
        var minPhotoContainer = 420;
        var minWindowWidth = 700;
        var minWindowHieght = 600;
        var boxOther = 90;
        var box_album = 70;

        var windowWidth = window.innerWidth - 100;
        var windowHeight = window.innerHeight - 75;
        windowWidth = (windowWidth < minWindowWidth) ? minWindowWidth : windowWidth;
        windowHeight = (windowHeight < minWindowHieght) ? minWindowHieght : windowHeight;

        var commentWidth = 320;
        var marginLeft = 15;
        var boxfix = 30;

        var photoContainerWidth = windowWidth - marginLeft - commentWidth;
        photoContainerWidth = (photoContainerWidth < minPhotoContainer) ? minPhotoContainer : photoContainerWidth;

        var imageWidth = windowWidth - commentWidth;
        if (width <= imageWidth) {
            imageWidth = width;
        }

        var imageHeight = parseInt(imageWidth * height / width);
        if (imageHeight > windowHeight) {
            imageHeight = windowHeight - boxOther;
            imageWidth = parseInt(width * imageHeight / height);
        }

        if (imageWidth < minImageWidth) {
            imageWidth = minImageWidth;
            imageHeight = parseInt(imageWidth * height / width);
        }

        while ((imageWidth > photoContainerWidth - marginLeft) || (imageHeight > windowHeight)) {
            imageWidth = imageWidth - 10;
            imageHeight = parseInt(imageWidth * height / width);
        }

        $('#popup-detail-wrap').css({ 'width': windowWidth - boxfix });
        $('#popup-detail-left .move').hide();

        if ($('#popup-detail-left ul').html() != '') {
            $('#popup-detail-left, .popup-detail-content').css({ 'width': photoContainerWidth - boxfix - marginLeft, 'height': windowHeight - box_album });

            if (height > windowHeight - box_album)
                $('.popup-detail-content > img').attr({ 'height': windowHeight - box_album, 'width': parseInt(width * (windowHeight - box_album) / height) });
            else {
                if (imageWidth > photoContainerWidth - boxfix)
                    $('.popup-detail-content > img').attr('width', imageWidth - boxfix).attr('height', imageHeight);
                else
                    $('.popup-detail-content > img').attr('width', imageWidth).attr('height', imageHeight);
            }
        }
        else {
            $('#popup-detail-left, .popup-detail-content').css({ 'width': photoContainerWidth - boxfix - marginLeft, 'height': windowHeight });

            if (imageWidth > photoContainerWidth - boxfix)
                $('.popup-detail-content > img').attr('width', imageWidth - boxfix).attr('height', imageHeight);
            else
                $('.popup-detail-content > img').attr('width', imageWidth).attr('height', imageHeight);
        }

        $('#popup-detail-left .move').hide();
        this.photoWidth = photoContainerWidth - boxfix - marginLeft;
        $('#popup-detail-right').css('height', windowHeight);

        var wWidth = document.documentElement.clientWidth;
        var wHeight = document.documentElement.clientHeight;

        var popupWidth = $('#popup-detail-wrap').width();
        var popupHeight = $('#popup-detail-wrap').height();

        $('#popup-detail-wrap').css({ 'left': wWidth / 2 - popupWidth / 2 - 10 });

        if (!this.isZoom()) {
            $('#popup-detail-left .zoom').hide();
        }
        //Ming Height
        MingHeight = this.adBoxHeight();
        if (MingHeight <= 150)
            MingHeight = 150;

        $('#mingId_frame_lightbox').attr('height', MingHeight);
    },
    callBack: function (next, prev) {
        var me = this;
        $('#popup-detail-left .next, .popup-detail-content > img').off('click').on('click', function () {
            if (next != null && next != '')
                me.bindData(next);
            else
                return false;
        })

        $('#popup-detail-left .prev').off('click').on('click', function () {
            if (prev != null && prev != '')
                me.bindData(prev);
            else
                return false;
        });

        $('#popup-detail-left .zoom').off('click').on('click', function () {
            if (me.isZoom()) {
                me.resizeFullScreen(me.width, me.height);
            }
            else {
                $('#popup-detail-left .move').hide();
                $('.popup-detail-right-box').css({ 'position': 'relative', 'left': '0', 'top': '0' });
                $('#popup-detail-bg').off('scroll');
                $('.popup-detail-content .next').css({ 'position': 'absolute', 'right': '30px' });
                $('.popup-detail-content .prev').css({ 'position': 'absolute', 'left': '30px' });

                me.resize(me.width, me.height);
            }
        });

        $('.popup-slide  ul li a img').off('click').on('click', function () {
            if ($(this).parent().parent('li').hasClass('active'))
                return;

            me.bindData($(this).attr('src'));
        });

        $('#popup-detail-wrap').click(function () { return false; });
        $('#popup-detail-bg').click(function () { me.closePopup(); });

        //        if (me.isZoom())
        //            $('.popup-detail-content .zoom').show();
        //        else
        //            $('.popup-detail-content .zoom').hide();
    },
    keyUp: function (e) {
        e.preventDefault();
        if (e.keyCode == 27) { photoDetail.closePopup(); }
        if (e.keyCode == 37) { $('#popup-detail-left .prev').click(); }
        if (e.keyCode == 39) { $('#popup-detail-left .next').click(); }
    },
    resizeFullScreen: function (width, height) {
        var box_album = 70;
        var leftpx_next = $('#popup-detail-right').innerWidth(true) + $('#popup-detail-wrap').position().left + 45 + 'px';
        var leftpx_prev = $('#popup-detail-wrap').position().left + 30 + 'px';

        $('#popup-detail-bg').scrollTop(0);

        if (width > $('#popup-detail-left').width())
            $('.popup-detail-content > img').attr({ 'width': $('#popup-detail-left').width(), 'height': Math.round($('#popup-detail-left').width() * height / width) });
        else
            $('.popup-detail-content > img').attr({ 'width': width, 'height': height });

        $('#popup-detail-left').css('height', 'auto');
        $('.popup-detail-content .next').css({ 'position': 'fixed', 'right': leftpx_next });
        $('.popup-detail-content .prev').css({ 'position': 'fixed', 'left': leftpx_prev });

        if ($('#popup-detail-left ul').html() != '') {
            $('#popup-detail-right').css('height', $('.popup-detail-content').height() + box_album);
        }
        else {
            $('#popup-detail-left, .popup-detail-content').css({ 'width': photoContainerWidth - boxfix - marginLeft, 'height': windowHeight });
            $('#popup-detail-right').css('height', $('.popup-detail-content').height());
        }

        var windowWidth = window.innerWidth - 100;
        var windowHeight = window.innerHeight - 75;
        var commentWidth = 320;
        var marginLeft = 15;
        var photoContainerWidth = windowWidth - marginLeft - commentWidth;

        $('#popup-detail-bg').scroll(function () {
            var y = $(this).scrollTop();
            if (y > 35) {
                $('.popup-detail-right-box').css({ 'position': 'fixed', 'left': photoContainerWidth + 25, 'top': '0', 'height': windowHeight + 40 });
                $('#popup-detail-left .move').hide();
                $('.popup-detail-content .popup-slide').show();
                $('#popup-detail-left').css('height', height);
                $('.popup-detail-content').css('height', height);
            }
            else
                $('.popup-detail-right-box').css({ 'position': 'relative', 'left': '0', 'top': '0' });
        });
    },
    isZoom: function () {
        var me = this;
        zoom = false;
        if ($('.popup-detail-content > img').attr('width') < me.width && $('.popup-detail-content > img').attr('height') < me.height) {
            zoom = true;
        }
        return zoom;
    },
    album_load: function (aSrc) {
        var me = this;
        var box_width = 0;
        var box_height = 50;
        var _ImgArr = [];
        var _margin = 8;
        var _width = 0;
        var index = me.getIndex(aSrc);
        var box = 0;
        var next = index + 1;

        $('.popup-slide li img[src="' + aSrc + '"]').parent().parent().addClass('active');

        if (me.obj.img.length > 5) {
            if ($('.popup-slide ul').html() != '') {
                for (i = 0; i < me.obj.img.length; i++) {
                    _ImgArr = me.getImgSize(me.obj.img[i]).split('|');

                    if (i > 0)
                        box_width = box_width + _margin;

                    box_width += parseInt(_ImgArr[0] * box_height / _ImgArr[1]);

                    if (box_width > me.photoWidth)
                        continue;

                    box = i + 1;
                }

                if (me.photoWidth < box_width + (box * _margin)) {
                    $('.popup-slide li').css('float', 'left').parent().css('width', '5000px');
                    if (next <= 5) {
                        $('.popup-slide ul').animate({ left: '0' }, 500);
                    }
                    else {
                        if (me.obj.img.length - index <= 5 && me.obj.img.length > 10)
                            return;

                        for (var i = 0; i < next - 5; i++) {
                            _width += $('.popup-slide li img[src="' + me.obj.img[i] + '"]').parent().parent().outerWidth(true);
                        }

                        var left = _width + ($('.popup-slide ul').position().left - 10);
                        $('.popup-slide ul').animate({ left: '-=' + left }, 500);
                    }
                }
            }
        }
    },
    getImgSize: function (src) {
        var newImg = new Image();
        newImg.src = src;
        p = $(newImg).ready(function () {
            return { width: newImg.width, height: newImg.height };
        });
        return p[0]['width'] + '|' + p[0]['height'];
    },
    reset: function () {
        $('#popup-detail-left .move').hide();
        $('.popup-detail-content .popup-slide').hide();
        $('.popup-slide li').removeClass('active');
        $('.popup-detail-right-box').css({ 'position': 'relative', 'left': '0', 'top': '0' });
        $('#popup-detail-bg').off('scroll');
        $('.popup-detail-content .next').css({ 'position': 'absolute', 'right': '30px' });
        $('.popup-detail-content .prev').css({ 'position': 'absolute', 'left': '30px' });
    },
    adBoxHeight: function () {
        var height = 0;
        box = 160;

        if (parseInt($('#popup-detail-right').height()) > 768) {
            height = $('#popup-detail-right').height() - $('.popup-detail-right-top').innerHeight() - box * 2;
            //$('#mingid_comments_content_popup > #mingId_frame_lightbox').attr('height', height);
        }
        else {
            height = $('#popup-detail-right').height() - $('.popup-detail-right-top').innerHeight() - box;
            //$('#mingid_comments_content_popup > #mingId_frame_lightbox').attr('height', height);
        }
        return height;
    },
    getIndex: function (src) {
        var me = this;
        var index = -1;
        for (var i = 0; i < me.obj.img.length; i++) {
            if (me.obj.img[i].src == src)
                index = i;
        }
        return index;
    }
}